<template>
  <!-- 代购单 -->
  <div class="purchase">
    <div class="container f1">
      <!-- 面包屑导航 -->
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/my' }">个人中心</el-breadcrumb-item>
        <el-breadcrumb-item>我要代购</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!-- 背景图 -->
    <div class="f2 container"></div>
    <div class="container f3">
      <div>
        <p>
          ·
          将您喜欢的商品链接粘贴到地址栏，生成代购订单后支付对应的商品费用（及国内运费），我们即可为您发起代购；在商品到达KoKo
          1号仓并验货通过后，再支付相应国际运费，我们即可为您发起国际运送。
        </p>
        <p>
          · 为了便于完成国际运送，请先确保您的KoKo
          账户有足够余额用于支付相关费用。余额不足<a>立即充值</a>
        </p>
      </div>
      <div>
        <!-- 步骤栏 -->
        <el-steps :active="1" align-center process-status="wait">
          <el-step title="提交代购单"></el-step>
          <el-step title="支付商品费用"></el-step>
          <el-step title="ikun代购"></el-step>
          <el-step title="提交运单"></el-step>
          <el-step title="确认收货"></el-step>
        </el-steps>
      </div>
      <div>
        <!-- 搜索框 -->
        <h1>欢迎ikun代购</h1>
        <div>
          <input
            type="text"
            placeholder="粘贴您需要代购的商品链接或输入商品名称"
          />
          <button>立即代购</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style lang="scss" scoped>
::v-deep .el-breadcrumb__inner.is-link:hover {
  color: #000;
}
::v-deep .el-breadcrumb {
  font-size: 16px;
}

.purchase {
  background-color: #fafafa;
  padding-bottom: 70px;
}

.container {
  width: 1200px;
  margin: 0 auto;

  &.f1 {
    margin-top: 30px;
    margin-bottom: 30px;
  }

  &.f2 {
    background-image: url(/public/purchase.png);
    height: 270px;
  }

  &.f3 {
    display: flex;
    flex-wrap: wrap;
    padding: 20px;
    box-sizing: border-box;
    background-color: #fff;

    > div:first-child {
      width: 100%;
      background-color: #ffe9e9;
      font-size: 12px;
      padding: 18px;
      color: #666666;

      > p {
        line-height: 15px;

        > a {
          color: #3b86cd;
          text-decoration: underline;
          cursor: pointer;
        }
      }
    }

    > div:nth-child(2) {
      width: 100%;
      height: 60px;
      padding: 0 180px;
      margin: 40px 0;
    }

    > div:last-child {
      width: 880px;
      margin: 0 auto;

      > h1 {
        margin-bottom: 15px;
        font-weight: bold;
        font-size: 25px;
      }

      > div {
        width: 100%;
        height: 60px;
        display: flex;
        margin-bottom: 20px;

        > input {
          width: 80%;
          height: 100%;
          outline: none;
          border: 1px solid #ddd;
          border-right: 0;
          padding-left: 20px;
          font-size: 14px;
          box-sizing: border-box;
        }

        > button {
          width: 20%;
          height: 100%;
          border: none;
          background-color: #ff6e6e;
          color: #fff;
          font-size: 16px;
          cursor: pointer;
        }
      }
    }
  }
}
</style>